import React, { Component } from 'react';
import BP from './BP'

class Lolm extends Component {
  constructor() {
    super();
    this.state = {
      // 英雄列表
      heroList: [
        {name: 'yasuo', id: 1},
        {name: 'js', id: 2},
        {name: 'vn', id: 3},
        {name: 'mao', id: 4},
        {name: 'gailun', id: 5},
      ],
      // 禁用的英雄
      banHero: {},
      // 选用的英雄
      pickHero: {},
    }
  }
  ban(index) {
    console.log(this.state.heroList[index]);
    this.setState({
      banHero: this.state.heroList[index]
    })
  }
  pick(index) {
    this.setState({
      pickHero: this.state.heroList[index]
    })
  }
  render() {
    return (
      <div>
        <BP
          list={this.state.heroList}
          ban={(index)=>this.ban(index)}
          pick={(index)=>this.pick(index)}
        ></BP>
        <hr />
        <p>已禁用：{this.state.banHero.name}</p>
        <p>已选用：{this.state.pickHero.name}</p>
      </div>
    );
  }
}

export default Lolm;
